<template>
	<view class="">
		<view
			class=" flex h-[500rpx] box-border rounded-lg-[20rpx]  mx-10rpx my-10rpx  justify-center flex-col items-center"
			:style="{backgroundImage: 'url(' + img('addon/shop_fenxiao/index/feedback.png') + ') ',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundPosition: 'cover'}">
			<view class="w-[95rpx]">
				<!-- <view class="text-[#fff]" style="transform: translateY(-10rpx)"> -->
				<view class="text-[#fff]" style="transform: translateY(45rpx)">
					<view class="!w-[95rpx] !h-[95rpx] rounded-full flex-shrink-0 overflow-hidden">
						<u-avatar v-if="member.headimg" :default-url="img('static/resource/images/default_headimg.png')"
							:src="img(member.headimg)" size="95rpx" leftIcon="none"></u-avatar>
						<u-avatar v-else :src="img('static/resource/images/default_headimg.png')" size="95rpx"
							leftIcon="none"></u-avatar>
					</view>
				</view>
				<view class="flex items-center justify-center ">
					<view class="mt-[80rpx]" style="transform: translateY(-20rpx)">
						<text class='text-[#fff]'>{{member.username}}</text>
					</view>
				</view>
			</view>
			<view class="mt-30rpx ml-[200rpx]" style="transform: translateY(8rpx)">
				<text class="gradient-text">{{all_money}}</text>
			</view>
		</view>
		<view class="flex items-center h-[140rpx] box-border rounded-lg-[20rpx] p-[30rpx] mx-20rpx my-20rpx"
			:style="{backgroundImage:'url(' + getBackgroundImage(item.percent) + ')',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundPosition: 'cover'}"
			v-for="(item,index) in order " :key="item.id">
			<view class="flex flex-col">
				<view class="flex items-center">
					<text class="text-[28rpx] truncate w-[500rpx] font-bold text-[#FDD6A1] font-bold">订单金额
						{{parseInt(item.order_money)}}
					</text>
				</view>
				<view class="my-[10rpx] rounded-[12rpx] overflow-hidden">
					<!-- <progress :percent = "(item.order_score-item.remain_dividends)/item.order_score*100" activeColor="#CD6C00" -->
					<progress :percent="percent[index]" activeColor="#CD6C00" backgroundColor="#FDD6A1"
						stroke-width="4" />
				</view>
				<view class=" text-[#FDD6A1] ">
					待释放冻结积分{{parseInt(item.remain_dividends)}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import { getOrderInfo } from '@/addon/shop_fenxiao/api/fenxiao';
	import { img } from '@/utils/common';
	import { t } from '@/locale';

	const member = ref(uni.getStorageSync("wap_member_info"))
	const order = ref([])
	const all_money = ref(0)
	onMounted(() => {
		getOrder()
	})

	const getOrder = () => {
		let data = {
			member_id: member.value.member_id
		}
		getOrderInfo(data).then((res : any) => {
			all_money.value = res.data.all_money
			order.value = res.data.order.map(item => ({
				...item,
				percent: (item.order_score - item.remain_dividends) / item.order_score * 100
			}));
		})
	}
	
	const getBackgroundImage = (percent : Number) => {
    return percent === 100
        ? img('addon/shop_fenxiao/index/shixiao.png')
        : img('addon/shop_fenxiao/index/shengxiao.png');
};

	const percent = computed(() => {
		let score = order.value.map((item) => {
			return (item.order_score - item.remain_dividends) / item.order_score * 100
		})
		return score
	})
</script>

<style lang="scss">
	.gradient-text {
		background: linear-gradient(to bottom, #fdd6a1, #cd6c00);
		/* 白色到红色的渐变 */
		-webkit-background-clip: text;
		/* 用文字裁剪背景 */
		color: transparent;
		/* 设置文字颜色为透明 */
		font-size: 70rpx;
		/* 文字大小 */
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	}
</style>